<template>
  <div>
    <Modal v-model="modal" width="60%" :title="titleValue[state]" :footer-hide="true" @on-visible-change="handleModalClose">
      <div id="myChartDemo" :style="{width: '100%', height: '480px'}"></div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "zhengqing-demo",
  data() {
    return {
      chartName: [],
      chartValue: [],
      modal: false,
      state: '',//分类： 0：报警   1：违章
      titleValue: {
        titile1: "ECharts Demo",
        titile2: "ECharts Demo"
      },
    };
  },
  methods: {
    open(row,state) {
      // 拿到类别信息
      var typeList = row.typeList;
      console.log(typeList);
      if (state == 0) {
        this.state = "titile1";
      } else if (state == 1) {
        this.state = "titile2";
      }
      for (let i = 0; i < typeList.length; i++) {
        var name = typeList[i].title;
        var value = typeList[i].value;
        this.chartName.push(name);
        this.chartValue.push({name: name,value: value});
      }
      this.showEcharts("myChartDemo", this.chartName, this.chartValue);
      this.modal = true;
    },
    showEcharts(id, Names, Values) {
      this.$nextTick(function() {
        this.drawPie(id, Names, Values);
      });
    },
    // 绘制饼状图
    drawPie(id, Names, Values) {
      this.charts = this.$echarts.init(document.getElementById(id));
      this.charts.on("click");
      this.charts.setOption({
        title: {
          text: 'ECharts Demo',
          subtext: '饼状图',
          left: 'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: Names // 扇形区域名称
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: Values, // 扇形区域数据
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    handleModalClose(val) {
      if (!val) {
        this.chartName = [];
        this.chartValue = [];
      }
    }
  }
};
</script>
